<template>
	<div>
		<vab-query-form style="width:100%">
			<vab-query-form-left-panel :span="18">
				<el-form v-model="$parent.search" @submit.native.prevent>
					<el-form-item>
						<el-input v-model="$parent.search.SysFileName__PY" size="small" placeholder="文件名称"
							@keyup.native.enter="$parent.getList"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button icon="el-icon-search" type="primary" native-type="submit" @click="$parent.getList"
							:loading="$parent.loading">
							查询
						</el-button>
						<uploadimg :justButton="true" :max="9" @change="uploadImages"
							v-if="$parent.search.EnumFileType === 0 || $parent.search.EnumFileType === '0'">
						</uploadimg>

						<uploadfile :justButton="true" :max="9" @change="uploadImages" v-else
							style="margin-left: 10px;">
						</uploadfile>
					</el-form-item>
				</el-form>
			</vab-query-form-left-panel>

			<vab-query-form-right-panel :span="4" v-if="isChoice">
				<!--CK调用的选择图片确定-->
				<el-button icon="el-icon-check" type="primary" @click="choiceOk" :disabled="choice == null"
					v-if="ckChoice">
					确定
				</el-button>
				<!--Dialog调用的选择图片-->
				<el-button icon="el-icon-check" type="primary" @click="choiceOkParent"
					:disabled="(!!isChoiceMany && (choiceList == null || choiceList.length == 0)) || (!isChoiceMany && choice == null)"
					v-else>
					确定
				</el-button>
			</vab-query-form-right-panel>
		</vab-query-form>

		<div style="width:90%;margin: 0 auto;text-align: left;">
			<div v-if="$parent.list.length <= 0" style="height:150px;width:100%;line-height: 150px;text-align: center;">
				暂无数据
			</div>

			<div v-else v-for="(item, index) in $parent.list" :key="item.ID"
				style="display: inline-block;margin-right: 10px;"
				:class="{ fileRadioSelected: (!!isChoiceMany && has(item)) || (!isChoiceMany && choice == item) }">
				<el-image v-if="item.EnumFileType == 0 && !!item.FilePath && !isChoice" :src="commonUrl(item.FilePath)"
					:preview-src-list="imageList" class="imgList">
				</el-image>
				<vab-remix-icon v-else-if="item.EnumFileType == 10 && !!item.FilePath && !isChoice"
					icon="file-word-line" class="el-image imgList"
					style="font-size: 150px;line-height: 150px;cursor: initial;" @click="downloadFile(item)" />
				<vab-remix-icon v-else-if="!!item.FilePath && !isChoice" icon="file-3-line" class="el-image imgList"
					style="font-size: 150px;line-height: 150px;cursor: initial;" @click="downloadFile(item)" />

				<el-image v-else-if="item.EnumFileType == 0 && !!item.FilePath && isChoice"
					:src="commonUrl(item.FilePath)" @click="clickText(item, index)" @dblclick="dbClickText(item, index)"
					class="imgList">
				</el-image>
				<vab-remix-icon v-else-if="item.EnumFileType == 10 && !!item.FilePath && isChoice" icon="file-word-line"
					class="el-image imgList" style="font-size: 150px;line-height: 150px;cursor: initial;"
					@click="clickText(item, index)" @dblclick="dbClickText(item, index)" />
				<vab-remix-icon v-else-if="!!item.FilePath && isChoice" icon="file-3-line" class="el-image imgList"
					style="font-size: 150px;line-height: 150px;cursor: initial;" @click="clickText(item, index)"
					@dblclick="dbClickText(item, index)" />

				<i v-if="$parent.button.删除 && !isChoice" class="el-icon-close" @click="handleRemove(item)"
					style="font-size: 35px;font-weight: 900;position: relative;right:35px;top:-125px;cursor: pointer;"></i>
				<br />

				<div @click="clickText(item, index, true)" :title="item.SysFileName">
					<label style="width:150px;">
						<span class="el-radio__label">
							<el-input v-if="$parent.button.修改文件名 && item.Edit && !isChoice" :ref="'elInput' + (index)"
								v-model="item.SysFileName" style="width:240px;z-index: 1000;" @blur="blurTxt(item)"
								:clearable="false">
							</el-input>
							<div class="hideTxt" v-else>
								{{ item.SysFileName }}
							</div>
						</span>
					</label>
				</div>
			</div>
		</div>
		<el-pagination :current-page="$parent.search.index" :page-size="$parent.search.size" :total="$parent.total"
			@current-change="$parent.indexChange" @size-change="$parent.sizeChange"></el-pagination>
	</div>
</template>

<script>
import common from "@/common/common.js";

export default {
	name: "SysFileListPartial",
	mixins: [common.baseVM],
	components: {},
	props: {
		isChoice: {
			type: Boolean,
			default: false
		},
		isChoiceMany: {
			type: Boolean,
			default: false
		},
		visibleChange: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		imageList() {
			var list = this.$parent.list;
			var r = [];
			for (var i = 0; i < list.length; i++) {
				var item = list[i];
				if (!!item.FilePath && item.EnumFileType == 0) {
					r.push(this.commonUrl(item.FilePath));
				}
			}
			return r;
		},
		ckChoice() {
			if (!this.CKEditor) return false;
			return true;
		},
		opener() {
			if (window.opener != null) {
				return window.opener;
			}
			return window.top;
		}
	},
	data() {
		return {
			loading: false,
			list: [],
			total: 0,
			search: {
				index: 1,
				size: 10
			},

			CKEditor: "",
			CKEditorFuncNum: "",

			choice: null,

			choiceList: []
		}
	},
	watch: {
		visibleChange(n, o) {
			this.choiceList = [];
		}
	},
	methods: {
		init() {
			//console.log("isChoice", this.isChoice);
			var query = this.getQuery();
			if (query["CKEditor"] != null) {
				this.CKEditor = query["CKEditor"];
			}
			if (query["CKEditorFuncNum"] != null) {
				this.CKEditorFuncNum = query["CKEditorFuncNum"];
			}
		},
		downloadFile(item) {
			this.confirm(`是否下载[${item.SysFileName}]?`, () => {
				var url = this.commonUrl(item.FilePath);
				window.open(url);
			});
		},
		clickText(item, index, edit) {
			this.choice = item;

			if (this.isChoiceMany) {
				this.changeChoiceList(item);
			}

			if (edit) {
				item.Edit = true;
				this.$nextTick(() => {
					var obj = this.$refs["elInput" + index];
					if (obj != null && obj.length > 0) {
						obj[0].focus();
					}
				});
			}
		},
		blurTxt(item) {
			item.Edit = false;
			if (item.SysFileName == null || item.SysFileName == "") {
				item.SysFileName = item.SysFileName2;
				return;
			}
			var needUpdate = item.SysFileName != item.SysFileName2;
			if (needUpdate) {
				var postData = this.toKeyValue({
					id: item.ID,
					name: item.SysFileName
				});
				this.post("api/System/SysFileUpdateName", postData).then(data => {
					this.showToast(this.comLan.js.opSuccess, "success");
					item.SysFileName2 = item.SysFileName;
				});
			}
		},
		handleRemove(item) {
			this.confirm("确认删除此图片?", () => {
				var postData = this.toKeyValue({
					id: item.ID
				});
				this.post("api/System/SysFileDel", postData).then(data => {
					this.showToast(this.comLan.js.opSuccess, "success");
					this.$parent.getList();
				});
			});
		},
		uploadImages(e) {
			//console.log("uploadImages", e);
			setTimeout(() => {
				this.$parent.getList();
			}, 1000);
			return;
			Promise.all(
				e.map((item) => {
					return this.uploadImage(item);
				})
			).then((data) => {
				this.showToast(this.comLan.js.opSuccess, "success");
				this.$parent.getList();
			}).catch(e => {
				//this.showToast(this.comLan.js.opFail + ":" + e, "error");
			});
		},
		uploadImage(item) {
			return new Promise((resolve, reject) => {
				this.post("api/System/SysFileAdd", {
					SysFileName: item.fileName,
					FilePath: item.base64
				}).then(data => {
					resolve(data);
				}).catch(e => {
					reject(e);
				});
			});
		},
		dbClickText(item, index) {
			this.clickText(item, index);
			if (this.ckChoice) {
				this.choiceOk();
				return;
			}

			this.choiceOkParent();
		},
		choiceOk() {
			if (this.choice == null) {
				return;
			}
			if (this.opener == null) {
				this.showToast("JS报错:找不到父级对象");
				return;
			}
			var ck = this.opener.CKEDITOR;
			if (ck == null || ck.tools == null) return;
			var filePath = this.choice.FilePath//this.commonUrl(this.choice.FilePath);
			ck.tools.callFunction(this.CKEditorFuncNum, filePath);
			window.close();
		},

		has(item) {
			var r = this.arrContains(this.choiceList, item);
			return r;
		},
		choiceOkParent() {
			//console.log("choiceOkParent");
			if (this.isChoiceMany) {
				if (this.choiceList == null || this.choiceList.length == 0) {
					return;
				}
				var r = [];
				for (var i = 0; i < this.choiceList.length; i++) {
					var item = this.choiceList[i];
					r.push({
						fileName: item.SysFileName,
						base64: item.FilePath//this.commonUrl(item.FilePath)
					});
				}
				this.$emit("choiceFileList", r);
				return;
			}
			if (this.choice == null) {
				return;
			}
			var obj = {
				fileName: this.choice.SysFileName,
				base64: this.choice.FilePath//this.commonUrl(this.choice.FilePath)
			};
			this.$emit("choiceFileList", [obj]);
		},
		changeChoiceList(item) {
			var has = this.has(item);
			if (!has) {
				this.choiceList.push(item);
			} else {
				for (var i = 0; i < this.choiceList.length; i++) {
					var objItem = this.choiceList[i];
					if (objItem == item) {
						this.choiceList.splice(i, 1);
						break;
					}
				}
			}
		}
	}
}
</script>
<style scoped="scoped"></style>
